@import '~nprogress/nprogress.css';

@import './themes.scss';

$name: gitako;

$min-screen-width: 1280px;
$github-content-width: 1020px;
$side-bar-base-width: $min-screen-width - $github-content-width;
$min-width-with-gitako: $min-screen-width + $side-bar-base-width;

$github-header-z-index: 32;
$github-pull-request-float-header-z-index: 110;
$minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-z-index) + 1;

@mixin interactive-frame() {
  @include interactive-border;
  @include interactive-background;
}

@mixin interactive-border(
  $default: var(--gitako-btn-border),
  $hover: var(--gitako-btn-hover-border),
  $active: var(--gitako-btn-active-border),
  $focus: $hover
) {
  border: 1px solid $default;
  &:hover {
    border: 1px solid $hover;
  }
  &:focus {
    border: 1px solid $focus;
  }
  &:active {
    border: 1px solid $active;
  }
}

@mixin interactive-background(
  $default: var(--gitako-btn-bg),
  $hover: var(--gitako-btn-hover-bg),
  $active: var(--gitako-btn-active-bg),
  $focus: $hover
) {
  background-color: $default;
  &:hover {
    background-color: $hover;
  }
  &:focus {
    background-color: $focus;
  }
  &:active {
    background-color: $active;
  }
}

@mixin interactive-background-on-before($default, $hover, $active, $focus: $hover) {
  &::before {
    background-color: $default;
  }
  &:hover {
    &::before {
      background-color: $hover;
    }
  }
  &:active {
    &::before {
      background-color: $active;
    }
  }
  &:hover {
    &::before {
      background-color: $hover;
    }
  }
}

@mixin hide-for-print {
  @media print {
    display: none;
  }
}

:root {
  --gitako-width: #{$side-bar-base-width};
}

.#{$name}-ready {
  // github
  // code folding start
  .blob-wrapper table .blob-num {
    position: relative; // for positioning
    min-width: 60px;
    padding-right: 20px;
  }

  // hide code fold handler if not enabled
  .gitako-code-fold-handler {
    display: none;
  }

  .gitako-code-fold-attached:not(.gitako-code-fold-attached-disabled) {
    tr {
      .gitako-code-fold-handler {
        @include hide-for-print();

        display: initial;
        position: absolute;
        top: 0px;
        right: 0px;
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;

        &::before {
          content: '';
          display: block;
          width: 10px;
          height: 20px;
          cursor: pointer;
          user-select: none;
          transition: 0.25s ease;
          -webkit-mask-image: url('~@primer/octicons/build/svg/chevron-down.svg?inline');
          mask-image: url('~@primer/octicons/build/svg/chevron-down.svg?inline');
          -webkit-mask-size: contain;
          mask-size: contain;
          -webkit-mask-position: center;
          mask-position: center;
        }

        @include interactive-background-on-before(
          var(--gitako-fg-subtle),
          var(--gitako-fg-default),
          var(--gitako-fg-muted)
        );
      }

      &.gitako-code-fold-active {
        .gitako-code-fold-handler {
          &::before {
            transform: rotate(-90deg);
          }

          @include interactive-background-on-before(
            var(--gitako-fg-muted),
            var(--gitako-fg-default),
            var(--gitako-fg-subtle)
          );
        }
      }

      // hide folded sections, except for print
      &.gitako-code-fold-hidden {
        @media screen {
          display: none;
        }
      }
    }
  }
  // code folding end

  // clippy button
  .markdown-body {
    .clippy-wrapper {
      position: relative;
      width: 0;
      height: 0;
      top: 8px;
      left: calc(100% - 40px);
      z-index: 1;

      .clippy {
        width: 32px;
        height: 32px;
        border: 1px solid var(--gitako-border-default);
        border-radius: 4px;

        @include interactive-background;
        .icon {
          width: 100%;
          height: 100%;
          display: block;
          background-image: url('~@primer/octicons-react/build/svg/clippy-16.svg?inline');
          background-position: center;
          background-repeat: no-repeat;
          &.success {
            background-image: url('~@primer/octicons-react/build/svg/check-16.svg?inline');
          }
          &.fail {
            background-image: url('~@primer/octicons-react/build/svg/x-16.svg?inline');
          }
        }
      }
    }
  }

  // gitee
  &.git-project {
    #git-header-nav {
      position: static;
      padding-left: 0;
      padding-right: 0;
    }

    padding-top: 0;
  }
}

.with-gitako-spacing {
  @media screen {
    margin-left: var(--gitako-width);
  }

  // gitee
  &.git-project {
    width: auto; // shrink width
    .site-content {
      min-width: 1040px;
    }
  }
}

@media (min-width: $github-content-width) {
  // github
  body.env-production {
    min-width: $github-content-width;
  }
}

// TODO: use react to render the button content and set color with CSS variables
@media (prefers-color-scheme: dark) {
  :root[data-color-mode='auto'] .markdown-body .clippy .icon {
    filter: invert(0.7); // hack to make it looks like a normal color :P
  }
}
:root[data-color-mode='dark'] {
  .markdown-body .clippy .icon {
    filter: invert(0.7); // hack to make it looks like a normal color :P
  }
}

.progress-pjax-loader.is-loading {
  left: 0; /* reposition progress bar of GitHub */
}

%hidden {
  display: none;
}

@mixin flex-center {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

@mixin icon-button(
  $default: transparent,
  $hover: var(--gitako-btn-hover-bg),
  $active: var(--gitako-btn-focus-bg),
  $focus: $hover
) {
  @include flex-center();
  cursor: pointer;
  padding: 0;
  border: none;

  @include interactive-background($default, $hover, $active, $focus);
}

// Why does not TextInput get theme properly?
@mixin input {
  color: var(--gitako-fg-default);
  background-color: var(--gitako-canvas-default);
  border-color: var(--gitako-border-default);
  box-shadow: var(--gitako-primer-shadow-inset);
}

.#{$name}-toggle-show-button-wrapper {
  @include hide-for-print();

  z-index: $minimal-z-index;
  position: fixed;
  top: 124px; // align with GitHub's navbar items
  left: 0px;
  display: inline-flex;
  align-items: center;
  transition: left 0.25s linear;

  &.hidden {
    left: -40px;
  }

  .#{$name}-toggle-show-button {
    @include icon-button(transparent, transparent, transparent);
    background: transparent;
    border: none;
    padding: 0;
    position: relative;
    left: -8px;

    &.error {
      cursor: not-allowed;
    }

    .octoface-icon {
      @include flex-center();

      width: 32px;
      height: 32px;
      padding: 4px;
      border-radius: 6px;
      @include interactive-frame;
      color: var(--gitako-fg-default);
      &:active {
        color: var(--gitako-fg-subtle);
      }
      transition: all ease 0.3s;
      font-size: 16px;
      transform: translateX(8px);
      &:active,
      &:hover {
        transform: translateX(12px);
      }
    }
    .tentacle {
      width: 40px;
      height: 40px;
      object-fit: contain;
      transition: all ease 0.4s;
      transform: translateX(-8px);
      filter: drop-shadow(0 0 1px var(--gitako-primer-canvas-backdrop));
    }
    &:active,
    &:hover {
      .tentacle {
        transform: translateX(-4px);
        filter: drop-shadow(0 0 2px var(--gitako-primer-canvas-backdrop));
      }
    }
  }

  .error-message {
    display: none;
    margin-left: 4px;
    padding: 2px 4px;
    font-size: 12px;
    color: var(--gitako-danger-fg);
    border: 1px solid var(--gitako-border-default);
    border-radius: 2px;
    background-color: var(--gitako-bg-subtle);
  }

  &:hover {
    .error-message {
      display: inline-block;
    }
  }
}

.#{$name}-side-bar {
  @include hide-for-print();

  @import '~@primer/css/base/index.scss';
  button {
    border-radius: 6px;
    font-weight: 600;
  }
  a {
    color: var(--gitako-accent-fg);
  }

  $resizeHandlerWidth: 1px;
  .#{$name}-side-bar-body-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: $minimal-z-index;
    display: flex;

    &.toggle-mode-persistent {
      &.collapsed {
        @extend %hidden;
      }
    }

    &.toggle-mode-float {
      left: 0;
      transition: all 0.25s cubic-bezier(0.55, 0.06, 0.68, 0.19); // values from Chrome devtools
      &.collapsed {
        left: calc(0px - #{$resizeHandlerWidth} - var(--gitako-width));
      }
    }

    .gitako-side-bar-body-wrapper-content {
    }
  }
  .#{$name}-resize-handler {
    display: flex;
    align-items: center;
    cursor: ew-resize;
    user-select: none;
    width: 0;
    background: var(--gitako-bg-subtle);
    border-right: $resizeHandlerWidth solid var(--gitako-border-default);
    overflow: hidden;
    box-sizing: content-box;
    &:hover,
    &:active {
      width: 16px;
      background: var(--gitako-bg-subtle);
      border-left: 1px solid var(--gitako-border-default);
    }

    .octicon.Grabber {
      margin-left: -2px;
      width: 20px;
      font-size: 0;
    }
  }

  .#{$name}-side-bar-body {
    $button-size: 32px;
    position: relative;
    width: var(--gitako-width);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--gitako-bg-subtle);
    border-left: 1px solid var(--gitako-border-default);
    overflow: hidden;

    .octicon {
      transition: transform 0.3s ease;
      color: var(--gitako-fg-subtle);
      width: 100%;
      height: 100%;
    }

    .octicon-color {
      color: var(--gitako-fg-subtle);
    }

    .octicon-wrapper {
      display: inline-block;
      width: 16px;
      min-width: 16px; // prevent shrink when sidebar is narrow
      text-align: center;
    }

    .#{$name}-side-bar-content {
      display: flex;
      flex: 1;
      flex-direction: column;
      min-height: 0; // make content shrinkable

      .header {
        position: relative;
        min-height: 62px; // GitHub header height if login
        background: var(--gitako-bg-subtle);
        padding: 6px 10px;
        flex-shrink: 0;
        position: relative; // prevent overlap by outline of other elements

        .user-and-repo {
          display: inline; // would be override by CSS rule of section from @primer/css
          line-height: 32px;

          a {
            color: var(--gitako-accent-fg);
            white-space: normal;
          }
        }

        .branch-name {
          margin-left: 4px;
          padding: 4px 6px; // did not align well for some reason :/
          color: var(--gitako-fg-muted);
          background-color: var(--gitako-accent-subtle);
        }

        .close-side-bar-button-position {
          float: right;
          z-index: 1; // prevent being covered by following elements

          .close-side-bar-button {
            @include icon-button;
            width: $button-size;
            height: $button-size;
            border-radius: $button-size;

            // feedback to click should be instant
            &:not(:active) {
              transition: background linear 0.3s;
            }

            &.active .octicon {
              color: var(--gitako-fg-subtle);
            }

            .action-icon {
              color: var(--gitako-fg-subtle);
              width: 20px;
              height: 20px;
              text-align: center;
              .octicon {
                width: 100%;
                height: 100%;
              }
              .Pin,
              .Tab {
                transform: rotateY(180deg);
              }
            }
          }

          .close-side-bar-button + .close-side-bar-button {
            margin-left: 4px;
          }
        }
      }

      .description-area {
        padding: 4px 10px;
      }

      .loading-indicator-container {
        width: 100%;
        height: 100%;
        @include flex-center();
        border-top: 1px solid var(--gitako-border-default);

        .loading-indicator {
          display: flex;
          align-items: center;
          color: var(--gitako-fg-subtle);

          &-icon {
            width: 20px;
            height: 20px;
            margin-right: 4px;

            .octicon {
              width: 20px;
              height: 20px;
              animation: pulse-rotate 1.8s infinite ease;
            }
          }
        }
      }

      .file-explorer {
        width: 100%;
        height: 100%;
        outline: none;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        &.freeze {
          filter: blur(1.5px) opacity(0.6) grayscale(0.9);
          cursor: pointer;

          > * {
            pointer-events: none;
            user-select: none;
          }
        }

        /* search input */
        .search-input-wrapper {
          position: relative;

          .search-input {
            width: 100%;
            box-shadow: none; // stay low
            border-width: 1px 0 1px 0; // remove border on left&right to make UI clear
            border-color: var(--gitako-border-default);
            border-radius: 0; // its rounded corner not match with nearby elements
            color: var(--gitako-fg-default);
            background: var(--gitako-bg-default);
            padding-right: 40px; // save space for actions

            &.error {
              border-color: var(--gitako-danger-emphasis);
            }
          }

          .actions {
            position: absolute;
            top: 0px;
            right: 0px;
            height: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 0 4px;

            .toggle-search-mode {
              margin: 0;
              padding: 2px 4px;
              min-width: 32px;
              border: 1px solid var(--gitako-border-muted);
              border-radius: 8px;
              color: var(--gitako-fg-muted);
              font-size: 12px;
              font-weight: 500;
              line-height: 1;
              outline: none;

              @include interactive-frame;
            }
          }
        }

        .files {
          position: relative;
          flex: 1;
          overflow: hidden;

          // Put this inside files will help files to get proper size derived from parents, regardless of its content size
          .magic-size-container {
            position: absolute;
            width: 100%;
            height: 100%;
          }
        }

        .node-item {
          &:hover {
            text-decoration: initial; // revert underline from .gitako-side-bar a:hover
            .node-item-label {
              text-decoration: underline; // apply underline like .gitako-side-bar a:hover
            }
          }

          &.focused {
            @include interactive-background(
              var(--gitako-canvas-subtle),
              var(--gitako-canvas-subtle),
              var(--gitako-canvas-inset)
            );
          }

          @include interactive-background(
            var(--gitako-canvas-default),
            var(--gitako-canvas-subtle),
            var(--gitako-canvas-inset)
          );

          &.disabled {
            pointer-events: none;
            color: var(--gitako-fg-muted);
          }
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0;
          line-height: 20px;
          cursor: pointer;
          white-space: nowrap;
          transition: padding 0.3s ease; // on toggle expansion in search results

          border-bottom: 1px solid var(--gitako-border-muted);
          &.compact {
            border-bottom: none;
            &.focused {
              border-top: 1px solid var(--gitako-border-muted);
              border-bottom: 1px solid var(--gitako-border-muted);
            }
          }

          &:not(:hover) {
            color: var(--gitako-fg-default);
          }

          @mixin icon-size() {
            width: 16px;
            height: 16px;
          }

          .octicon-wrapper:first-child {
            margin-right: 6px;
          }

          &-type-icon {
            margin-right: 4px;
            width: 16px;
            // not specify height here, it'll break vertical alignment

            & + .octicon-wrapper,
            & + .node-item-icon {
              margin-right: 6px;
            }
          }

          &-icon {
            @include icon-size();
            object-fit: contain;
            vertical-align: text-bottom;
            box-sizing: content-box;

            &.dim {
              filter: sepia(1) hue-rotate(180deg);
            }
          }

          // folder icon rotate when expand
          &.expanded .octicon.ChevronRight {
            transform: rotate(90deg);
          }

          .node-item-label {
            overflow: hidden;
            text-overflow: ellipsis;
            align-items: center;
          }

          &:not(:hover) {
            .node-item-label .prefix {
              color: var(--gitako-fg-muted);
            }
          }

          .actions {
            z-index: 1; // prevent being covered by next .node-item
            padding-right: 8px;

            .node-item-comment {
              display: inline-block;
              width: 48px;
              padding: 0 4px;
              color: var(--gitako-fg-muted);

              .octicon-wrapper {
                margin: 0; // make it closer to the comment amount label
              }
            }

            .go-to-button,
            .find-in-folder-button {
              @include icon-button();
              width: 28px;
              height: 28px;
              border-radius: 28px;
              white-space: nowrap;
              .octicon-wrapper {
                margin-right: 0;
              }
            }
          }

          &.compact {
            .go-to-button,
            .find-in-folder-button {
              border-radius: 4px;
              width: 20px;
              height: 20px;
            }
          }

          &:not(:hover) {
            .go-to-button,
            .find-in-folder-button {
              display: none;
            }
          }
        }
      }
    }

    .#{$name}-settings-bar {
      z-index: 2;
      background: var(--gitako-bg-subtle);
      display: flex;
      flex-direction: column;
      max-height: calc(100vh - 120px);
      &-title {
        border-top: 1px solid var(--gitako-border-muted);
        padding: 10px;
        box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
          0 3px 3px -2px rgba(0, 0, 0, 0.12);
        z-index: 1;
      }
      &-content {
        padding: 10px 10px;
        flex: 1;
        overflow: auto;
        position: relative;

        .shadow-shelter {
          position: absolute;
          width: 100%;
          height: 10px;
          top: 0;
          left: 0;
          background: var(--gitako-bg-subtle);
          z-index: 1;
        }
        .settings-section {
          &:not(:last-of-type) {
            margin-bottom: 30px;
          }

          .field {
            margin-bottom: 8px;

            .help {
              cursor: help;
            }

            label {
              display: inline-block;
              margin-bottom: 0px;
              font-weight: 600;
            }
            input {
              &:disabled {
                cursor: not-allowed;
              }
            }
            select {
              width: 100%;
              -moz-appearance: menulist-button;
              // make it look like text inputs
              height: 36px;
              border-radius: 6px;
              border: 1px solid var(--gitako-border-default);
              background: var(--gitako-canvas-default);
              color: var(--gitako-fg-default);
              box-shadow: var(--gitako-primer-shadow-inset);
            }
            &.field-checkbox {
              padding-left: 20px;
              vertical-align: middle;
              label {
                margin-bottom: 0;
              }

              input[type='checkbox'],
              input[type='radio'] {
                float: left;
                margin: 5px 0 0 -20px;
                vertical-align: middle;
              }
            }
          }
        }
      }
      .link-button {
        cursor: pointer;
        display: inline-block;
        margin-bottom: 4px;
      }
      .hint {
        color: var(--gitako-fg-subtle);
      }
      .access-token-input-control {
        display: flex;
        .access-token-input {
          flex: 1;
          @include input();
        }
      }
      .toggle-shortcut-input-control {
        display: flex;
        .toggle-shortcut-input {
          flex: 1;
          @include input();
        }
      }
      .header-row {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2px 6px 2px 10px;
        border-top: 1px solid var(--gitako-border-muted);

        .version {
          color: var(--gitako-fg-muted);
        }

        .header-right {
          display: flex;
          align-items: center;
          user-select: none;
          cursor: help; // Will this make user hover for more time to see the tooltip?
        }

        .settings-button {
          @include icon-button();
          $size: 32px;
          width: $size;
          height: $size;
          border-radius: $size;

          .octicon-wrapper {
            width: 18px;
          }
        }
      }
    }
  }
}

// gitee
.git-project {
  // reset styles
  .#{$name}-side-bar {
    input[type='text'],
    input[type='password'],
    .ui-autocomplete-input,
    textarea,
    .uneditable-input {
      padding: initial;
      border: none;
    }
  }
}

@keyframes rotate {
  from {
    transform: rotateZ(0);
  }
  to {
    transform: rotateZ(360deg);
  }
}

@keyframes pulse-rotate {
  0% {
    transform: rotateZ(0);
  }
  20% {
    transform: rotateZ(190deg);
  }
  30% {
    transform: rotateZ(175deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  70% {
    transform: rotateZ(370deg);
  }
  80% {
    transform: rotateZ(355deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
